<template>
  <a-tabs default-active-key="2">
    <a-tab-pane key="1">
      <span slot="tab">
        <a-icon type="info-circle" />
        举报进度
      </span>
      <div id="components-form-demo-advanced-search" style="padding: 10px 0">
        <!--    数据区-->
        <div class="search-result-list">
          <!--                模态框-->
          <a-modal v-model="visible" title="举报详情" okText="确认" cancelText="关闭" @onCancel="handleOk" @ok="handleOk">
            <p class="detail">处理状态:{{this.currentReport.reportStatus === 1 ? '已处理' : this.currentReport.reportStatus === 2 ? '已驳回' : '待处理'}}</p>
            <p class="detail">处理方式:{{this.currentReport.reportResult}}</p>
            <p class="detail">处理描述:{{this.currentReport.reportBeizhu}}</p>
          </a-modal>

          <a-table :columns="columns"
                   :data-source="reportList || []"
                   bordered
                   :loading="isloading"
                   rowKey="id">

            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>

            <span slot="action" slot-scope="text, record">
          <a-space>
            <a-button type="primary"
                      @click="reportHandler('detail',record)" size="small" title="详情">详情</a-button>
          </a-space>
            </span>
          </a-table>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2">
      <span slot="tab">
        <a-icon type="chrome" />
        反馈进度
      </span>
      <div style="padding: 10px 0">
        <!--    数据区-->
        <div class="search-result-list">
          <!--                模态框-->
          <a-modal v-model="feedbackDetailVisible" title="反馈详情" okText="确认" cancelText="关闭" @onCancel="feedBacksubmitHandler" @ok="feedBacksubmitHandler">
            <p class="detail">处理状态:{{this.currentFeedback.feedbackStatus === 1 ? '已处理' : '待处理'}}</p>
            <p class="detail">反馈结果:{{this.currentFeedback.feedbackResult}}</p>
            <p class="detail">反馈人:{{this.currentFeedback.handlerAdmin ? this.currentFeedback.handlerAdmin.userName : ''}}</p>
          </a-modal>

          <a-table :columns="feedbackColumns"
                   :data-source="feedbackList || []"
                   bordered
                   :pagination="false"
                   :loading="isloading"
                   rowKey="id">

            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>

            <span slot="action" slot-scope="text, record">
              <a-space>

            <a-button type="primary"
                      @click="feedBackHandler('detail',record)" size="small" title="详情">详情</a-button>
          </a-space>
            </span>
          </a-table>
        </div>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import {getMyReport} from "@/api/resourse";
import moment from "moment";
import {getMyFeedbackList} from "@/api/feedback";
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20, offset: 4 },
};
export default {
  name: "Progress",
  mounted() {
    this.getReportList();
    this.loadFeedbackList();
  },
  data(){
    return {
      reportList:[],
      columns:[
        {
          title: '编号',
          scopedSlots: { customRender: 'serial' },
          width: 80,
          key: 'index',
          align:'center',
        },
        {
          title: '举报类型',
          dataIndex: 'reportType',
          key: 'reportType',
          width: 100,
          align: 'center'
        },
        {
          title: '被举报资源id',
          dataIndex: 'resId',
          key: 'resId',
          width: 120,
          align: 'center'
        },
        {
          title: '状态',
          key: 'reportStatus',
          dataIndex: 'reportStatus',
          width: 100,
          align: 'center',
          customRender: (text) => text === 0 ? <a-tag color="orange">待处理</a-tag> : text === 1 ?
              <a-tag color="green">已处理</a-tag> : <a-tag color="red">已驳回</a-tag>
        },
        {
          title: '举报原因',
          key: 'reportWhy',
          dataIndex: 'reportWhy',
          align: 'center',
          ellipsis: true,
          width: 200
        },
        {
          title: '举报提交时间',
          key: 'reportPushTime',
          dataIndex: 'reportPushTime',
          width: 200,
          align: 'center',
          ellipsis: true,
          customRender: text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      formItemLayout,
      formTailLayout,
      visible:false,
      isloading:false,
      currentReport:{},

      // 反馈
      feedbackList:[],
      feedbackColumns:[
        {
          title: '编号',
          scopedSlots: { customRender: 'serial' },
          width: 80,
          key: 'index',
          align:'center',
        },
        {
          title: '反馈类型',
          dataIndex: 'feedbackType',
          key: 'feedbackType',
          width: 100,
          align: 'center'
        },
        {
          title: '处理状态',
          key: 'feedbackStatus',
          dataIndex: 'feedbackStatus',
          width: 100,
          align: 'center',
          customRender: (text) => text === 0 ? <a-tag color="orange">待处理</a-tag> : <a-tag color="green">已处理</a-tag>
        },
        {
          title: '反馈内容',
          key: 'feedbackContent',
          dataIndex: 'feedbackContent',
          align: 'center',
          ellipsis: true,
          width: 250
        },
        {
          title: '反馈日期',
          key: 'feedbackDate',
          dataIndex: 'feedbackDate',
          width: 200,
          align: 'center',
          ellipsis: true,
          customRender: text => text === null ? '' : moment(text).format("yyyy-MM-DD HH:mm:ss")
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          width: 200,
          align: 'center',
          scopedSlots: {customRender: 'action'},
        },
      ],
      feedbackDetailVisible: false,
      feedbackHandlerVisible: false,
      currentFeedback:{},
    }
  },
  methods:{
    // 获得举报列表
    async getReportList(){
      this.isloading = true;
      const {code,data,msg} = await getMyReport();
      if (code === 200){
        this.reportList = data;
        this.isloading = false;
      } else{
        this.$message.error(msg);
      }
    },

    // handler处理器
    reportHandler(type, record){
      this.currentReport = record;
      if ('detail' === type){
        this.visible = true;
      }
    },

    handleOk(e) {
      this.visible = false;
      this.currentReport = {};
    },

    // 反馈
    // 获得我的反馈列表
    async loadFeedbackList(){
      const { code,data,msg } = await getMyFeedbackList();
      if (code === 200){
        this.feedbackList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // handler处理器
    async feedBackHandler(type, record){
      this.currentFeedback = record;
      if ('detail' === type){
        console.log('de_DE');
        this.feedbackDetailVisible = true;
      }
    },
    feedBacksubmitHandler(){
      this.feedbackDetailVisible = false;
      this.currentFeedback = {};
    }
  }
}
</script>

<style scoped>
.detail{
  line-height: 30px;
}
</style>
